<template>
  <el-card style="height: 40vh">
    <template #header>
      <div class="card-header">
        <span>课程列表</span>
      </div>
    </template>
    <el-table :data="lessionList" style="width: 100%">
      <el-table-column label="序号" type="index" width="100" />
      <el-table-column label="课程名称" prop="className" width="180">
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime"> </el-table-column>
      <el-table-column label="可见状态" width="180">
        <template #default="scope">
          <el-switch
            @change="switchv(scope.row.className, !scope.row.visable)"
            v-model="scope.row.visable"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="edit(scope.row.className)">
            <el-icon
              ><svg
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ba633cb8=""
              >
                <path
                  d="m199.04 672.64 193.984 112 224-387.968-193.92-112-224 388.032zm-23.872 60.16 32.896 148.288 144.896-45.696L175.168 732.8zM455.04 229.248l193.92 112 56.704-98.112-193.984-112-56.64 98.112zM104.32 708.8l384-665.024 304.768 175.936L409.152 884.8h.064l-248.448 78.336L104.32 708.8zm384 254.272v-64h448v64h-448z"
                  fill="currentColor"
                ></path></svg
            ></el-icon>
          </el-button>
          <el-button @click="guanli(scope.row.className)" :id="scope">
            <el-icon
              ><svg
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ba633cb8=""
              >
                <path
                  fill="currentColor"
                  d="M128 384v448h768V384H128zm-32-64h832a32 32 0 0 1 32 32v512a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V352a32 32 0 0 1 32-32zm64-128h704v64H160zm96-128h512v64H256z"
                ></path></svg
            ></el-icon>
          </el-button>
          <el-button @click="bianpai(scope.row.className)" :id="scope">
            <el-icon
              ><svg
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ba633cb8=""
              >
                <path
                  fill="currentColor"
                  d="M544 768v128h192a32 32 0 1 1 0 64H288a32 32 0 1 1 0-64h192V768H192A128 128 0 0 1 64 640V256a128 128 0 0 1 128-128h640a128 128 0 0 1 128 128v384a128 128 0 0 1-128 128H544zM192 192a64 64 0 0 0-64 64v384a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V256a64 64 0 0 0-64-64H192z"
                ></path></svg
            ></el-icon>
          </el-button>
          <el-button @click="kaike(scope.row.className)" :id="scope">
            <el-icon
              ><svg
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ba633cb8=""
              >
                <path
                  fill="currentColor"
                  d="M224 128v704h576V128H224zm-32-64h640a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32z"
                ></path>
                <path
                  fill="currentColor"
                  d="M64 832h896v64H64zm256-640h128v96H320z"
                ></path>
                <path
                  fill="currentColor"
                  d="M384 832h256v-64a128 128 0 1 0-256 0v64zm128-256a192 192 0 0 1 192 192v128H320V768a192 192 0 0 1 192-192zM320 384h128v96H320zm256-192h128v96H576zm0 192h128v96H576z"
                ></path></svg
            ></el-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align:center;">
            {{ message }}
    </div>
  </el-card>
</template>
<script>
import { ElMessage } from "element-plus";
export default {
  name: "LessionListPage",
  data() {
    return {
      lessionList: [
        {
          className: "Java程序设计",
          visable: true,
          createTime: "2020-12-12",
        },{
          className: "MySQL数据库技术",
          visable: true,
          createTime: "2020-12-11",
        },{
          className: "Web前端开发基础",
          visable: true,
          createTime: "2020-12-11",
        },{
          className: "web前端项目开发实战",
          visable: true,
          createTime: "2020-12-11",
        },
      ],
      message: "",
    };
  },
  methods: {
    edit(name) {
      this.message = "正在编辑" + name;
    },
    guanli(name) {
      this.message = "正在管理" + name;
    },
    bianpai(name) {
      this.message = "正在资源编排" + name;
    },
    kaike(name) {
      this.message = "开课" + name;
    },
    switchv(name, show) {
      if (show) {
        ElMessage({
          message: name + "已经不可见",
          type: "warning",
        });
      } else {
        ElMessage({
          message: name+"已经可见",
          type: "success",
        });
      }
    },
  },
};
</script>